import { Spin, Dropdown, Menu } from 'ant-design-vue'
import { assert } from '@/utils/logger'

export default {
  data() {
    return {
      spinning: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.spinning = false
    }, 1500)
  },

  render() {
    const handleClickMenu = async menuItem => {
      switch (menuItem.key) {
        case 'logout':
          await this.$store.dispatch('user/logout')
          this.$router.replace('/login')
          break
        case 'user':
        case 'password':
          break
        default:
          assert(false, '未知菜单 key，请检查代码')
      }
    }

    return this.spinning ? <Spin size="small" /> : (
      <Dropdown>
        <div class="pro-global-header-avatar">
          <span class="anticon">Admin</span>
        </div>
        <Menu class="pro-global-header-index-dropdown-menu" onClick={ handleClickMenu } slot="overlay">
          <Menu.Item key="user">
            <span>用户中心</span>
          </Menu.Item>
          <Menu.Item key="password">
            <span>修改密码</span>
          </Menu.Item>
          <Menu.Divider />
          <Menu.Item key="logout">
            <span>退出登录</span>
          </Menu.Item>
        </Menu>
      </Dropdown>
    )
  }
}
